<template>
	<view class="container">
		<uni-section>
			<view class="example">
				<!-- 自定义表单校验 -->
				<uni-forms ref="customForm" :rules="customRules" :modelValue="customFormData">
					<uni-forms-item label="头像">
						<u-avatar :src="customFormData.Photo" @click="chooisImage"></u-avatar>
					</uni-forms-item>
					<uni-forms-item label="姓名" required name="Name">
						<uni-easyinput v-model="customFormData.Name" placeholder="请输入姓名" />
					</uni-forms-item>
					<uni-forms-item label="电话" required name="Phone">
						<uni-easyinput v-model="customFormData.Phone" disabled placeholder="请输入年龄" />
					</uni-forms-item>
					<uni-forms-item label="性别" required>
						<uni-data-checkbox v-model="customFormData.Sex" :localdata="sexs" />
					</uni-forms-item>
				</uni-forms>
				<button type="primary" @click="submit('customForm')">提交</button>
			</view>
		</uni-section>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				
				sexs: [{
					text: '男',
					value: 0
				}, {
					text: '女',
					value: 1
				}, {
					text: '保密',
					value: 2
				}],
				// 校验表单数据
				valiFormData: {
					Id:uni.getStorageSync('userData').id,
					Name: uni.getStorageSync('userData').name,
					Phone:uni.getStorageSync('userData').phone,
					Sex:uni.getStorageSync('userData').sex,
					Photo:'',
				},
				// 自定义表单数据
				customFormData: {
					Id:uni.getStorageSync('userData').id,
					Name: uni.getStorageSync('userData').name,
					Phone:uni.getStorageSync('userData').phone,
					Sex:uni.getStorageSync('userData').sex,
					Photo:uni.getStorageSync('userData').photo,
				},
				// 自定义表单校验规则
				customRules: {
					Name: {
						rules: [{
							required: true,
							errorMessage: '姓名不能为空'
						}]
					},
					Phone: {
						rules: [{
							required: true,
							errorMessage: '年龄不能为空'
						}]
					},
				},
			}
		},
		computed: {
			// 处理表单排列切换
			alignment() {
				if (this.current === 0) return 'left'
				if (this.current === 1) return 'top'
				return 'left'
			}
		},
		onLoad() {},
		onReady() {
			// 设置自定义表单校验规则，必须在节点渲染完毕后执行
			this.$refs.customForm.setRules(this.customRules)
		},
		methods: {
			onClickItem(e) {
				this.current = e.currentIndex
			},
			add() {
				this.dynamicLists.push({
					label: '域名',
					rules: [{
						'required': true,
						errorMessage: '域名项必填'
					}],
					id: Date.now()
				})
			},
			del(id) {
				let index = this.dynamicLists.findIndex(v => v.id === id)
				this.dynamicLists.splice(index, 1)
			},
			chooisImage(){
				let that=this
				uni.chooseImage({
					count:1,
					success(res) {
						uni.uploadFile({
							url:'https://system.yjspchina.com/api/v1/Authority/UploadImage',
							filePath: res.tempFilePaths[0],
							name: 'file',
							success(item) {
								console.log(item);
								that.customFormData.Photo='https://system.yjspchina.com'+JSON.parse(item.data).data
									// success(item){
							// this.customFormData.Photo='https://system.yjspchina.com'+JSON.parse(item.data).data)
									// }
						
								// if(type==2){
								// 	that.memberImg =  'http://47.109.59.82:8081' + JSON.parse(res
								// .data).data
								// 	that.tempImgPath=res.tempFilePaths[0]
								// 	that.uploadMemberImg();
								// }
							}
						})
						// uni.uploadFile({
						// 	// url:'https://system.yjspchina.com/api/v1/Authority/UploadImage',
						// 	// filePath: res.tempFilePaths[0],
						// 	name: 'file',
						// 	// success(item){
						// 	// 	this.customFormData.Photo='https://system.yjspchina.com'+JSON.parse(item.data).data)
						// 	// }
						// })
						
					}
				})
			},
			submit(ref) {
				let that=this
				this.$refs[ref].validate().then(res => {
					that.$ajax.ChangeUser(this.customFormData).then(res2=>{
						uni.showToast({
							title:res2.message,
							icon:'none',
							duration:2000
						})
						this.$ajax.GetUserInfo().then(res=>{
							uni.setStorageSync('userData',res.data)
						})
					})
				}).catch(err => {
					console.log('err', err);
				})
			},
		}
	}
</script>
<style lang="scss">

	.example {
		padding: 15px;
		background-color: #fff;
	}

	.segmented-control {
		margin-bottom: 15px;
	}

	.button-group {
		margin-top: 15px;
		display: flex;
		justify-content: space-around;
	}

	.form-item {
		display: flex;
		align-items: center;
	}

	.button {
		display: flex;
		align-items: center;
		height: 35px;
		margin-left: 10px;
	}
</style>


